<template>
    <div>
        <div style="background-color: #F3F5F8;text-align: left;">
            <!-- <div><el-button size="small" @click="backToHome" type="primary">返回主页面</el-button></div> -->
            <el-row>
                <el-col :span="6" :offset="1" style="padding: 20px;">
                    <div><img v-if="question.userImg.length > 0" :src="imgUrl+question.userImg" style="height: 200px;width: 200px;" /></div>
                </el-col>
                <el-col :span="17" style="padding: 20px;">
                    <el-row>
                        <el-col :span="24">
                            <div style="height: 100px;overflow-y: scroll;">
                                <div style="color: #005097;margin-top: 10px;"><el-button type="text" style="font-size: larger;font-weight: bold;">标题：{{ question.title }}</el-button></div>
                                <div style="color: #666666;margin-top: 10px;margin-bottom: 10px;font-size: larger;">内容：{{ question.content }}</div>
                            </div>
                            <div v-if="question.img.length > 0">
                                <img v-for="(img,index) in question.imgList" :key="index" style="height: 100px;width: 150px;" :src="imgUrl+img" />
                            </div>
                            <div v-else-if="question.video.length > 0">
                                <video :src="imgUrl+question.video" type="video/mp4" controls="controls" style="height: 100px;width: auto;"></video>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22" :offset="1">
                    <div style="color: #666666;margin-top: 10px;font-size: larger;height: 60px;line-height: 60px;padding: 20px;">话题发起人： {{ question.userName }} <i class="el-icon-alarm-clock"></i> {{ question.formatTime }}</div>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-collapse v-model="activeNames">
                <div v-for="(item,index) in replyList" :key="index" class="question">
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="3" :offset="2">
                            <div><img :src="imgUrl+item.userImg" style="height: 100px;width: 100px;" /></div>
                            <div style="color: #666666;margin-top: 10px;font-size: small;"><i class="el-icon-user"></i> {{ item.userName }} </div>
                        </el-col>
                        <el-col :span="19" style="border-left: 1px #DCDFE6 solid;padding: 20px;">
                            <el-row>
                                <el-col :span="20">
                                    <div style="color: #666666;margin-top: 10px;margin-bottom: 10px;word-wrap: break-word;">{{ item.content }}</div>
                                    <div v-if="item.img.length > 0">
                                        <img v-for="(img,index) in item.imgList" :key="index" style="height: 100px;width: 150px;" :src="imgUrl+img" />
                                    </div>
                                    <div v-else-if="item.video.length > 0">
                                        <video :src="imgUrl+item.video" type="video/mp4" controls="controls" style="height: 300px;width: auto;"></video>
                                    </div>
                                    <el-row>
                                        <el-col :span="18">
                                            <div style="color: #666666;margin-top: 10px;font-size: small;"> <i class="el-icon-alarm-clock"></i> {{ item.formatTime }}</div>
                                        </el-col>
                                        <el-col :span="4" style="text-align: right;">
                                            <el-button type="text">{{ item.adopt === 1? '已被采纳':'未被采纳' }}</el-button>
                                        </el-col>
                                    </el-row>
                                    <el-collapse-item :name="item.id+''">
                                        <template slot="title">
                                            <el-button type="text" @click="openCollapse(item.id+'')">查看更多回复（{{item.dataList.length}}）</el-button>
                                        </template>
                                        <div v-for="(item1,index1) in item.dataList" :key="index1">
                                            <el-row>
                                                <el-col :span="24" style="padding: 20px;">
                                                    <el-row>
                                                        <el-col :span="20">
                                                            <div style="color: #666666;margin-top: 10px;margin-bottom: 10px;word-wrap: break-word;line-height: 20px;">
                                                                <el-row>
                                                                    <el-col :span="4"><img :src="imgUrl+item1.userImg" style="height: 40px;width: 40px;margin: 10px;" /></el-col>
                                                                    <el-col :span="20" style="line-height: 60px;">
                                                                        <el-button type="text">{{ item1.userName }}</el-button>回复
                                                                        <el-button type="text">{{ item1.rUserName }}</el-button>： {{ item1.content }}
                                                                    </el-col>
                                                                </el-row>
                                                            </div>
                                                            <div v-if="item1.img.length > 0">
                                                                <img v-for="(img,index) in item1.imgList" :key="index" style="height: 100px;width: 150px;" :src="imgUrl+img" />
                                                            </div>
                                                            <div v-else-if="item1.video.length > 0">
                                                                <video :src="imgUrl+item1.video" type="video/mp4" controls="controls" style="height: 300px;width: auto;"></video>
                                                            </div>
                                                            <el-row>
                                                                <el-col :span="18">
                                                                    <div style="color: #666666;margin-top: 10px;font-size: small;"> <i class="el-icon-alarm-clock"></i> {{ item1.formatTime }}</div>
                                                                </el-col>
                                                                <el-col :span="4"><el-button type="text" @click="replyToUser(item.id,item1.u_id,item1.userName)">回复</el-button></el-col>
                                                            </el-row>
                                                        </el-col>
                                                        <el-col :span="4">
                                                            <el-popconfirm v-if="userType === 'auditors'" title="确定删除该评论吗？" @confirm="deleteRReply(item1.id)" ><el-button size="small" slot="reference" type="danger">删除</el-button></el-popconfirm>
                                                        </el-col>
                                                    </el-row>
                                                </el-col>
                                            </el-row>
                                        </div>
                                        <div style="text-align: right;"><el-button @click="showReplyRSubmit(item.id,item.u_id)">我也评论一句</el-button></div>
                                        <!-- 评论里的提交评论 -->
                                        <div v-if="replyR.rid === item.id" style="background-color: #FCFCFC;border: 2px #a09f9f solid;margin-top: 20px;margin-bottom: 20px;border-radius: 10px;">
                                            <el-row style="line-height: 40px;margin: 20px;">
                                                <el-col :span="2">内容</el-col>
                                                <el-col :span="22"><textarea style="width: 99%;height: 100px;border:1px #DCDFE6 solid;border-radius: 4px;" v-model="replyR.content"></textarea></el-col>
                                            </el-row>
                                            <el-row style="line-height: 40px;margin: 20px;">
                                                <el-col :span="2">图片</el-col>
                                                <el-col :span="22" :offset="2" style="text-align: left;">
                                                    <el-upload
                                                        action="http://120.26.2.5:15400/upload/file"
                                                        :limit="9"
                                                        list-type="picture-card"
                                                        :file-list="imgListR"
                                                        :on-remove="removeImageR"
                                                        :on-success="uploadImageR">
                                                        <el-button type="success" icon="el-icon-picture-outline" circle></el-button>
                                                    </el-upload>
                                                </el-col>
                                            </el-row>
                                            <el-row style="line-height: 40px;margin: 20px;">
                                                <el-col :span="2">视频</el-col>
                                                <el-col :span="22" :offset="2" style="text-align: left;">
                                                    <el-upload
                                                        action="http://120.26.2.5:15400/upload/file"
                                                        :limit="1"
                                                        list-type="text"
                                                        :file-list="videoListR"
                                                        :on-remove="removeVideoR"
                                                        :on-success="uploadVideoR">
                                                        <el-button type="danger" icon="el-icon-video-camera">上传视频</el-button>
                                                    </el-upload>
                                                </el-col>
                                            </el-row>
                                            <div style="margin: 30px;"><el-button style="width: 80%;background-color: #BDCEFC;color: white;border-radius: 20px;border: none;" type="primary" @click="submitReplyR(item.u_id)">提交</el-button></div>
                                        </div>
                                    </el-collapse-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-popconfirm v-if="userType === 'auditors'" title="确定删除该评论吗？" @confirm="deleteReply(item.id)" ><el-button slot="reference" type="danger">删除</el-button></el-popconfirm>
                                    <el-button v-if="question.u_id == userId" @click="useReply(item.id)">采纳</el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse>
        </div>
        <div style="clear: both;text-align: right;">
            <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChangeReply"></el-pagination>
        </div>
        <div style="background-color: #FCFCFC;border: 2px #a09f9f solid;margin-top: 20px;margin-bottom: 100px;border-radius: 10px;">
            <div style="text-align: left;font-size: large;margin: 20px;"><i class="el-icon-edit"></i> 发表评论</div>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">内容</el-col>
                <el-col :span="22"><textarea style="width: 99%;height: 200px;border:1px #DCDFE6 solid;border-radius: 4px;" v-model="reply.content"></textarea></el-col>
            </el-row>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">图片</el-col>
                <el-col :span="22" :offset="2" style="text-align: left;">
                    <el-upload
                        action="http://120.26.2.5:15400/upload/file"
                        :limit="9"
                        list-type="picture-card"
                        :file-list="imgList"
                        :on-remove="removeImage"
                        :on-success="uploadImage">
                        <el-button type="success" icon="el-icon-picture-outline" circle></el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">视频</el-col>
                <el-col :span="22" :offset="2" style="text-align: left;">
                    <el-upload
                        action="http://120.26.2.5:15400/upload/file"
                        :limit="1"
                        list-type="text"
                        :file-list="videoList"
                        :on-remove="removeVideo"
                        :on-success="uploadVideo">
                        <el-button type="danger" icon="el-icon-video-camera">上传视频</el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <div style="margin: 30px;"><el-button style="width: 80%;background-color: #BDCEFC;color: white;border-radius: 20px;border: none;" type="primary" @click="submitReply">提交</el-button></div>
        </div>
    </div>
</template>

<script>
import { addReply, addReplyR, deleteReply, deleteRReply, getQuestion, listQuestionReply, updateReply } from '@/api/api'
import { timestampToTime } from '@/util/dateUtil'
export default {
    data(){
        return {
            imgUrl: '',
            questionId: 0,
            question: {
                id: 0,
                title: '',
                content: '',
                img: '',
                video: '',
                m_id: 0,
                time: 0,
                u_id: 0,
                userName: '',
                userImg: '',
                moduleName: ''
            },
            replyList:[],
            current: 1,
            size: 10,
            total: 0,
            reply:{
                content: '',
                img: '',
                qid: 0,
                quid: 0,
                uid: 0,
                video: ''
            },
            imgList:[],
            videoList: [],
            activeNames:[],
            replyUser: '',
            replyR:{
                content: '',
                img: '',
                rid: 0,
                ruid: 0,
                uid: 0,
                video: ''
            },
            imgListR:[],
            videoListR: [],
            userId: 0,
            userType: ''
        }
    },
    mounted(){
        const that = this
        that.imgUrl = that.$store.state.imgUrl
        that.questionId = that.$route.query.q_id
        that.getQuestion()
        that.getQuestionReplyList()
        that.userId = localStorage.getItem('userId')
        that.userType = localStorage.getItem('userType')
    },
    methods:{
        getQuestion:function(){
            const that = this
            getQuestion({
                id:that.questionId
            }).then(res => {
                that.question = res.data
                that.question.imgList = that.question.img.length > 0?that.question.img.split(','):[]
                that.question.formatTime = timestampToTime(that.question.time)
            })
        },
        getQuestionReplyList:function(){
            const that = this
            listQuestionReply({
                current: that.current,
                size: that.size,
                questionId: that.questionId
            }).then(res => {
                that.total = res.data.total
                let replyList = res.data.records
                replyList.forEach(element => {
                    element.imgList = element.img.split(',')
                    element.formatTime = timestampToTime(element.time)
                    if(element.dataList !== undefined){
                        let dataList = element.dataList
                        dataList.forEach(item => {
                            item.imgList = item.img.split(',')
                            item.formatTime = timestampToTime(item.time)
                        })
                        element.dataList = dataList
                    }else{
                        element.dataList = []
                    }
                });
                that.replyList = replyList
            })
        },
        deleteReply:function(id){
            const that = this
            deleteReply(id).then(res => {
                if(res.status === 200){
                    that.getQuestionReplyList()
                }else{
                    that.$message({
                        message: '删除失败',
                        type: 'error'
                    })
                }
            })
        },
        currentChangeReply:function(current){
            const that = this
            that.current = current
            that.getQuestionReplyList()
        },
        uploadImage:function(response, file, fileList){
            const that = this
            that.reply.img = ''
            if(fileList.length > 0){
                fileList.forEach(item => {
                    that.reply.img += (item.response + ',')
                })
            }
            that.reply.img = that.reply.img.substring(0,that.reply.img.length - 1)
        },
        removeImage:function(file, fileList){
            const that = this
            that.reply.img = ''
            if(fileList.length > 0){
                fileList.forEach(item => {
                    that.reply.img += (item.response + ',')
                })
            }
            that.reply.img = that.reply.img.substring(0,that.reply.img.length - 1)
        },
        uploadVideo:function(response, file, fileList){
            const that = this
            if(fileList.length > 0){
                that.reply.video = fileList[0].response
            }else{
                that.reply.video = ''
            }
        },
        removeVideo:function(file, fileList){
            const that = this
            if(fileList.length > 0){
                that.reply.video = fileList[0].response
            }else{
                that.reply.video = ''
            }
        },
        submitReply:function(){
            const that = this
            if(that.reply.content.length <= 0){
                that.$message({
                    message: '评论内容为空！',
                    type: 'warning'
                })
                return
            }
            that.reply.qid = that.questionId
            that.reply.quid = that.question.u_id
            if(localStorage.getItem('userId') == null){
                that.$message({
                    message:'您还未登录！',
                    type: 'warning'
                })
                return
            }
            that.reply.uid = localStorage.getItem('userId')
            addReply(that.reply).then(res => {
                if(res.status === 200){
                    that.$message({
                        message: '评论成功！',
                        type: 'success'
                    })
                    that.getQuestionReplyList()
                    that.reply = {
                        content: '',
                        img: '',
                        qid: 0,
                        quid: 0,
                        uid: 0,
                        video: ''
                    }
                    that.imgList = []
                    that.videoList = []
                }else{
                    that.$message({
                        message: '提交失败',
                        type: 'error'
                    })
                }
            })
        },
        openCollapse:function(id){
            
        },
        deleteRReply:function(id){
            const that = this
            deleteRReply(id).then(res => {
                if(res.status === 200){
                    that.getQuestionReplyList()
                }else{
                    that.$message({
                        message:'删除失败',
                        type: 'error'
                    })
                }
            })
        },
        replyToUser:function(rid,uid,userName){
            const that = this
            that.replyR.rid = rid
            that.replyR.ruid = uid
            that.replyUser = '回复 '+userName+'：'
            that.replyR.content = that.replyUser
        },
        showReplyRSubmit:function(id,uid){
            const that = this
            that.replyR.rid = id
            that.replyR.ruid = uid
            that.replyUser = ''
            that.replyR.content = ''
        },
        uploadImageR:function(response, file, fileList){
            const that = this
            that.replyR.img = ''
            if(fileList.length > 0){
                fileList.forEach(item => {
                    that.replyR.img += (item.response + ',')
                })
            }
            that.replyR.img = that.replyR.img.substring(0,that.replyR.img.length - 1)
        },
        removeImageR:function(file, fileList){
            const that = this
            that.replyR.img = ''
            if(fileList.length > 0){
                fileList.forEach(item => {
                    that.replyR.img += (item.response + ',')
                })
            }
            that.replyR.img = that.replyR.img.substring(0,that.replyR.img.length - 1)
        },
        uploadVideoR:function(response, file, fileList){
            const that = this
            if(fileList.length > 0){
                that.replyR.video = fileList[0].response
            }else{
                that.replyR.video = ''
            }
        },
        removeVideoR:function(file, fileList){
            const that = this
            if(fileList.length > 0){
                that.replyR.video = fileList[0].response
            }else{
                that.replyR.video = ''
            }
        },
        submitReplyR:function(uid){
            const that = this
            if(that.replyR.content.length <= 0){
                that.$message({
                    message: '评论内容为空！',
                    type: 'warning'
                })
                return
            }
            if(uid !== that.replyR.ruid && !that.replyR.content.startsWith(that.replyUser)){
                that.replyR.ruid = uid
            }
            if(uid !== that.replyR.ruid || that.replyR.content.startsWith(that.replyUser)){
                that.replyR.content = that.replyR.content.substring(that.replyUser.length,that.replyR.content.length)
            }
            if(localStorage.getItem('userId') == null){
                that.$message({
                    message:'您还未登录！',
                    type: 'warning'
                })
                return
            }
            that.replyR.uid = localStorage.getItem('userId')
            addReplyR(that.replyR).then(res => {
                if(res.status === 200){
                    that.$message({
                        message: '评论成功！',
                        type: 'success'
                    })
                    that.getQuestionReplyList()
                    that.replyR.ruid = uid
                    that.replyR.img = ''
                    that.replyR.video = ''
                    that.replyR.content = ''
                    that.imgListR = []
                    that.videoListR = []
                }else{
                    that.$message({
                        message: '提交失败',
                        type: 'error'
                    })
                }
            })
        },
        backToHome:function(){
            this.$router.push('/')
        },
        useReply:function(id){
            const that = this
            updateReply({
                id:id,
                adopt: 1
            }).then(res => {
                if(res.status === 200){
                    that.$message({
                        message: '采纳成功',
                        type: 'success'
                    })
                    that.getQuestionReplyList()
                }else{
                    that.$message({
                        message: '采纳失败',
                        type: 'error'
                    })
                }
            })
        }
    }
}
</script>

<style scoped>

</style>